<template>
	<view>
		<!-- <view class="u-flex u-relative u-padding-20" style="background-color: #FFFFFF;padding-bottom: 0">
			<view class="list-search u-flex-1" style="padding: 0;">
				<u-search placeholder="请输入要搜索的记录" shape="square" bg-color="#F7F7F7" v-model="keyword" @change="$u.debounce(searchChange, 300)" animation :show-action="false"></u-search>
			</view>
		</view> -->
		<u-sticky bgColor="#fff">
		    <u-tabs :list="tabList" :current="current[type] || 0" lineWidth="35" :scrollable="false" @click="tabsClick"></u-tabs>
		</u-sticky>
		<block v-if="list.length == 0">
			<view :style="{ height: (systemInfo.windowHeight - 120) + 'px'}">
				<u-empty icon="https://gxmanager.oss-cn-shenzhen.aliyuncs.com/xfqczbgl_static/no-data.png" iconSize="150" marginTop="50" text="暂无来访申请数据！"></u-empty>
			</view>
		</block>
		<block v-else>
			<scroll-view scroll-y>
				<view class="base-list">
					<view class="base-item" v-for="(item,index) in list" :key="index">
						<view class="silk-ribbon">
							<span class="silk-ribbon1" :class="item.status == 0 ? 'yellow' : item.status == 1 ? 'blue' : item.status == 2 ? 'red' : 'green'"><span>{{ item.status == 0 ? '待审批' : item.status == 1 ? '待来访' : item.status == 2 ? '未通过' : '已来访'}}</span></span>
						</view>
						<view class="base-info row">
							<view class="base-content u-flex-col u-row-between">
								<view>
									<view class="notic-title">拜访部门：{{ item.bfDeptName }}</view>
									<view class="notic-title">来访时间：{{ item.lfTime }}</view>
									<view class="notic-title">申请人：{{ item.userName }}</view>
									<view class="notic-title">来访事由：{{ item.lfSy }}</view>
								</view>
							</view>
						</view>
						
						<view class="base-handle">
							<view class="btn" style="height: auto;line-height: normal;">
								<u-button type="error" size="small" @click="delSpdata(item.id)">删除</u-button>
							</view>
							<view class="btn" style="max-width: 180rpx;height: auto;line-height: normal;">
								<u-button type="primary" size="small" @click="navTo('visitingApplicationDetails', { type: 1, id: item.id })">详情/编辑</u-button>
							</view>
							<block v-if="userInfo.isAdmin == 1">
								<view class="btn" style="max-width: initial;height: auto;line-height: normal;" v-if="item.status == 0">
									<u-button type="error" size="small" @click="modifiedState(item, 2)">设为未通过</u-button>
								</view>
								<view class="btn" style="max-width: initial;height: auto;line-height: normal;" v-if="item.status == 1 || item.status == 2">
									<u-button type="warning" size="small" @click="modifiedState(item, 0)">设为待审批</u-button>
								</view>
								<view class="btn" style="max-width: initial;height: auto;line-height: normal;" v-if="item.status == 0 || item.status == 2">
									<u-button type="success" size="small" @click="modifiedState(item, 1)">设为审批通过</u-button>
								</view>
								<!-- <view class="btn" style="max-width: initial;height: auto;line-height: normal;" v-if="item.status == 1">
									<u-button type="success" @click="modifiedState(item, 9)">设为已来访</u-button>
								</view> -->
							</block>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-loadmore :status="status" />
		</block>
		<u-gap height="200" v-if="list.length != 0"></u-gap>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: {
					0: 1,
					1: 2,
					2: 3,
					9: 4
				},
				type: null,
				tabList: [{
					name: '全部',
				}, {
					name: '待审批',
				}, {
					name: '已审批'
				}, {
					name: '未通过'
				}, {
					name: '已来访'
				}],
				status: 'loadmore',
				keyword: '',
				popupShow: false,
				list: [
					// {
					// 	lfTime: '2024-08-08 09:00',
					// 	userName: '张三',
					// 	lfSy: '不知道',
					// 	bfDeptName: '市场部',
					// 	status: 1,
					// },
					// {
					// 	lfTime: '2024-08-09 18:00',
					// 	userName: '李四',
					// 	lfSy: '看看',
					// 	bfDeptName: '生产部',
					// 	status: 2,
					// },
				],
				page: 1,
				limit: 10,
				total: 0
			};
		},
		computed: {
			userInfo() {
				if (Object.keys(this.$store.state.userInfo).length != 0) {
					return this.$store.state.userInfo
				} else if (Object.keys(uni.getStorageSync('userInfo')).length != 0) {
					return uni.getStorageSync('userInfo')
				} else {
					return {
						id: null,
						openId: "",
						unionId: "",
						wxName: "",
						wxPhone: "",
					}
				}
			}
		},
		onReachBottom() {
			// 判断数据是否全部加载完毕，true则停止请求接口，修改loadingmore状态
			if (this.list.length >= this.total) {
				this.status = 'nomore'
				return;
			}
			this.status = 'loading';
			this.page += 1;
			this.getListData(true); //调用数据
		},
		methods: {
			getListData(isPush = false) {
				this.$api.getListVisit({
					orderColumn: 'createTime',
					orderDirection: 'descending',
					pageNum: this.page,
					pageSize: this.limit,
					status: this.type,
					userId: this.userInfo.id
				}).then(res => {
					let data = res.data.rows
					this.total = res.data.total
					if (!isPush) {
						this.list = []
					}
					if (this.total < this.limit) { // 不足10条数据
						this.status = 'nomore'
					}
					for (let i of data) {
						this.list.push(i)
					}
				})
			},
			navTo(path, params) {
				this.$Router.push({ name: path, params })
			},
			reset() {
				this.status = 'loading';
				this.page = 1
				this.list = []
				this.getListData()
			},
			searchChange(value) {
				this.reset()
			},
			delSpdata(ids) {
				uni.showModal({
					content: '确定要删除该条数据吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.delVisit({ ids }).then(res => {
								this.reset()
								uni.showToast({
									title: '删除成功！'
								})
							})
						}
					}
				})
			},
			tabsClick(item) {
				this.type = item.index == 0 ? null : item.index == 1 ? 0 : item.index == 2 ? 1 : item.index == 3 ? 2 : 9;
				this.reset();
			},
			
			modifiedState(item, status) {
				this.$api.editVisitStatus({
					id: item.id,
					status
				}).then(res => {
					this.$refs.uToast.show({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						complete: () => {
							this.reset();
						}
					});
				})
			}
		},
		onLoad() {
			const {
				type,
			} = this.$Route.query;
			this.type = type;
			this.getListData()
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
	.notic-title{
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	.notic-desc{
		margin-top: 24rpx;
		font-size: 24rpx;
		justify-content: space-between;
		align-items: center;
	}
	.list-search {
		padding: 24rpx 28rpx;
		background-color: #fff;
	}
	.downMenu{
		padding: 8rpx 15rpx;
		background: #F7F7F7;
		border-radius: 4rpx;
		margin: 0 30rpx 30rpx 0;
		border: 1rpx solid #F7F7F7;
	}
	
	.silk-ribbon {
		display: flex;
		justify-content: center;
		position: absolute;
		right: 0;
		color: #FFFFFF;
	}
	
	.silk-ribbon:nth-child(even) {
		margin-right: 4%;
	}
	
	.silk-ribbon1 {
		position: absolute;
		top: -18px;
		right: 25px;
	}
	
	/* .silk-ribbon1:after {
		position: absolute;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-left: 53px solid transparent;
		border-right: 53px solid transparent;
		border-top: 10px solid #379b9c;
	} */
	
	.silk-ribbon1 span {
		position: relative;
		display: inline-block;
		text-align: center;
		background: #379b9c;
		font-size: 14px;
		line-height: 1;
		padding: 12px 8px 10px;
		border-top-right-radius: 8px;
		width: 80px;
		border-radius: 0 0 8px 8px;
	}
	
	.silk-ribbon1 span:before,
	.silk-ribbon1 span:after {
		position: absolute;
		content: "";
		display: block;
	}
	
	.silk-ribbon1 span:before {
		background: #379b9c;
		height: 6px;
		width: 6px;
		left: -6px;
		top: 0;
	}
	
	.silk-ribbon1 span:after {
		background: #337e7f;
		height: 6px;
		width: 8px;
		border-radius: 8px 8px 0 0;
		left: -8px;
		top: 0;
	}

	.silk-ribbon1.green:after{
		border-top-color: #00B96B;
	}
	.silk-ribbon1.green span,
	.silk-ribbon1.green span:before,
	.silk-ribbon1.green span:after{
		background: #00B96B;
	}
	
	.silk-ribbon1.yellow:after{
		border-top-color: #F2BD27;
	}
	.silk-ribbon1.yellow span,
	.silk-ribbon1.yellow span:before,
	.silk-ribbon1.yellow span:after{
		background: #F2BD27;
	}
	
	.silk-ribbon1.red:after{
		border-top-color: #e54d42;
	}
	.silk-ribbon1.red span,
	.silk-ribbon1.red span:before,
	.silk-ribbon1.red span:after{
		background: #e54d42;
	}
	
	.silk-ribbon1.blue:after{
		border-top-color: #0081ff;
	}
	.silk-ribbon1.blue span,
	.silk-ribbon1.blue span:before,
	.silk-ribbon1.blue span:after{
		background: #0081ff;
	}
</style>
